<template>
	<view class="content">
		<view class="section-0">
			<view class="section-body">
				<view class="project-name" @click="showProjectPop()">
					<text class="iconfont icon-qiehuan"></text>{{projectName !== '' ? projectName : curProject.project_name}}
				</view>
			</view>
		</view>
		<u-popup
			mode="center"
			:show="showProject" 
			@close="closeProjectPop" 
			:round="50"
		>
			<view class="pop project-pop">
				<view class="title">
					<text>请选择项目</text>
				</view> 
				<view class="body" >
				   <view class="wrapper _scroll">
						<view class="item" v-for="(item, idx) in projectName === '' ? projectList : [{project_name: projectName, id: 999}]" :key="item.id"
						@click="handleSelectProject(idx)">
							<view 
							:class="`check ${selectedProject.indexOf(idx) !== -1 ? 'check__active' : ''}`" 
							>
								<view class="check-on"></view>
							</view>
							<view class="name">{{item.project_name}}</view>
						</view>
				   </view>
				</view>
				<view class="custom-button" @click="confirmSelectUser()">
					确认
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapGetters, mapActions} from 'vuex';
	import { projectSelectListApi } from '@/api/project.js'
	export default{
		data() {
			return {
				showProject: false,
				projectList: [],
				selectedProject: [],
			}
		},
		props: {
			projectName: {
				type: String,
				default: ''
			},
		},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject',
				userInfo: 'system/getUserInfo',
				curRole: 'system/getCurRole',
			})
		},
		methods:{
			...mapActions({setCurProject: 'system/setCurProject'}),
			handleSelectProject(idx) {
				this.selectedProject=[idx]
			},
			confirmSelectUser() {
				if (this.projectName !== '') {
					this.closeProjectPop();
					return;
				}
				this.setCurProject(this.projectList[this.selectedProject[0]]);
				this.closeProjectPop();
			},
			async showProjectPop() {
				this.showProject = true;
			},
			async fetchList() {
				let params = {};
				if (this.curRole === '项目经理') {
					params.link_user = this.userInfo.user_name;
				}
				uni.showLoading({title: '加载中...'});

				const { data } = await projectSelectListApi(params);
				uni.hideLoading();
				if (data.code === 1) {
					this.projectList = data.data;
					if (this.curProject.id === '') {
						this.setCurProject(this.projectList[0]);
					}
				}
			},
			closeProjectPop() {
				this.showProject = false;
			}
		},
		mounted() {
			this.fetchList();
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.pop{
			width: 671rpx;
			padding-bottom: 40rpx;
			background-color: #fff;
			border-radius: 35rpx;
			overflow: hidden;
			.title{
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				background-color: #1534ce;
				font-size: 42rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 4rpx;
				color: #ffffff;
				text-align: center;
			}
			
		}
		.project-pop{
			
				.body{
					padding: 40rpx 50rpx;
					.wrapper{
						width: 100%;
						height: 540rpx;
						overflow-y: auto;
						overflow-x: hidden;
					}
					.item{
						
						width: auto;
						margin-bottom: 20rpx;
						@include clear();
						.check{
							width: 24rpx;
							height: 24rpx;
							border: solid 1rpx #000000;
							border-radius: 50%;
							float: left;
							position: relative;
							top: 7rpx;
							.check-on{
								transition: 0.3s ease;
								opacity: 0;
								transform: scale(0.5);
								border-radius: 50%;
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								margin: auto;
								width: 18rpx;
								height: 18rpx;
								background-color: #000000;
							}
						}
						.name{
							width: calc(100% - 54rpx);
							float: left;
							height: 40rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							font-size: 30rpx;
							font-weight: 300;
							font-stretch: normal;
							line-height: 40rpx;
							letter-spacing: 0rpx;
							color: #000000;
							margin-left: 20rpx;
						}
						.check__active{
							.check-on{
								opacity: 1;
								transform: scale(1);
							}
						}
						
					}
				}
			
		}
		.section-0{
			
				width: 100%;
				background-color: #2e5efe;
				.section-body{
					width: 100%;
					padding-left: 40rpx;
					height: 90rpx;
					padding-right: 40rpx;
					background-color: #1534ce;
					background-size: cover;
					background-repeat: no-repeat;
					border-top-left-radius: 50rpx;
					border-top-right-radius: 50rpx;
					overflow: hidden;
					box-sizing: border-box;
					.project-name{
						margin-top: 24rpx;
						width: 100%;
						height: 42rpx;
						font-size: 26rpx;
						font-weight: light;
						font-stretch: normal;
						line-height: 42rpx;
						letter-spacing: 0rpx;
						color: #ffffff;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						.iconfont{
							font-weight: normal;
							font-size: 26rpx;
							margin-right: 20rpx;
						}
					}
				}
			
		}
	}
</style>
